<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /*  DOM元素的拖拽功能的实现
        射击游戏中的每隔一段时间射击
        计算鼠标移动的距离
        监听scroll滚动事件
        搜索联想
        高频点击提交,表单重复提交  */

    /* options: {
      leading: false,   //是否立即执行
      trailing: true     //最后一次是否执行
      //两者不能同为false,否则就会产生bug,会导致触发事件立即执行一次后就失效了!
    }) */
    function throttle(func, wait, options) {
      let _this, args, timeout;
      let old = 0;     //时间戳
      //如果没有options就将其设置为空对象
      if (!options) options = {};

      /* let later = function () {
        old = new Date().valueOf();
        timeout = null;
        func.apply(_this, args);
      } */
      return function () {
        _this = this;
        args = arguments;

        let now = new Date().valueOf();
        // 如果设置不立即执行
        if (options.leading === false && !old) {
          old = now;
        }
        // 如果设置立即执行，第一次执行时，old为0
        if (now - old > wait) {
          // 如果存在定时器
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          // 执行一次
          func.apply(_this, args);
          // 记录执行时的时间戳
          old = now;

          // 如果不存在定时器并且设置最后一次执行
        } else if (!timeout && options.trailing !== false) { 
          //最后一次也被执行
          timeout = setTimeout(function () {
            old = new Date().valueOf();
            timeout = null;
            func.apply(_this, args);
          }, wait)
        }
      }
    }

  </script>
</body>

</html>